<template>
  <div class="pc-head">
    <div class="pc-head-position">
      <div class="pc-head-body">
        <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/logo02.png" class="pc-head-logo" /> -->
        <!-- <img src="../../assets/logo02.png" class="pc-head-logo" /> -->
        <img @click="tohome" src="https://jingye.oss-cn-qingdao.aliyuncs.com/homem/logo1.png" class="pc-head-logo" alt="">

        <ul class="pc-head-menu">
          <li v-for="(item,key) in menu" :class="['pc-head-menu-item',menu_flag?'bot':'']" :ref="'menu'+key" :key="key">
            <router-link :to="item.url" @click.native="changeRouter(key)">{{item.name}}</router-link>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/HOt.png" alt="">
          </li>
          <li v-if="menu_show" class="pc-head-line" :style="menu_show ? setLineStyle() : ''"></li>
          <div class="hot">
          </div>
        </ul>
      </div>
    </div>
    <div style="height:80px;"></div>
    <div>
      <img class="pc-head-bg" :src="banner" alt />
    </div>
  </div>
</template>

<script>
export default {
  props: { banner: {} },
  data() {
    return {
      menu: [
        { name: '首页', url: '/index/index' },
        { name: '服务', url: '/index/fuwu/website' },
        { name: '案例', url: '/index/example' },
        { name: '社区', url: '/index/news' },
        { name: '关于景烨', url: '/index/about' }
      ],
      menu_index: 0,
      menu_show: false,
      menu_flag: false,
      path: ''
    }
  },
  mounted() {
    this.getMenuIndex()
  },
  methods: {
    // 去到首页
    tohome() {
      this.$router.push('/index/index/index')
    },
    //判断路由方向
    // toroute(){

    // }
    //获取menu_index
    getMenuIndex() {
      var router = window.location.pathname
      router = router.split('/')
      var router_len = router.length
      router.splice(router_len - 1, 1)
      router = router.join('/')
      for (var i in this.menu) {
        if (this.menu[i].url.indexOf(router) != -1) {
          this.menu_index = i
        }
      }
      this.menu_show = true
      // this.menu_flag = true;
    },
    //设置底部横线的样式
    setLineStyle() {
      //console.log(this.$refs["menu" + this.menu_index][0].offsetWidth)
      var width = this.$refs['menu' + this.menu_index][0].offsetWidth
      var len = 0
      for (var i in this.menu) {
        if (i < this.menu_index) {
          len += this.$refs['menu' + i][0].offsetWidth
        }
      }
      len += (width - 77) / 2
      return 'left:' + len + 'px'
    },
    //改变路由时触发
    changeRouter(key) {
      this.menu_index = key
      this.path = this.$router.path
    }
  }
}
</script>

<style scoped>
@keyframes bounceUpDown {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(0px, -3px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}
.pc-head {
  width: 100%;
  background: #fff;
}
.pc-head-position {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  z-index: 99;
}
.pc-head-body {
  width: 1200px;
  margin: auto;
  height: 80px;
  line-height: 80px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.pc-head-logo {
  float: left;
  margin-top: 15px;
}
.pc-head-menu {
  float: left;
  height: 80px;
  margin-left: 100px;
  position: relative;
}

.pc-head-menu-item {
  position: relative;
  float: left;
  padding: 0 50px;
  font-size: 18px;
}
.pc-head-menu-item img {
  display: none;
}
.pc-head-menu-item:nth-child(2) img {
  display: block;
  width: 20px;
  height: 22px;
  position: absolute;
  top: 15px;
  right: 30px;
  animation: bounceUpDown 0.5s infinite;
}
.bot {
  border-bottom: 1px solid #d6151a;
}
.pc-head-menu-item > a:hover {
  color: #d6151a !important;
  border-bottom: 1px solid #d6151a;
}
.pc-head-menu > li a {
  display: block;
  text-decoration: none;
}
.pc-head-bg {
  width: 100%;
}
.pc-head-line {
  position: absolute;
  width: 77px;
  height: 2px;
  background: #d6151a;
  bottom: 0;
  transition: all 0.1s linear;
}
</style>